<template>
  <div class="container-project">
    <!-- 头部 -->
	  <head-message></head-message>
    <!-- 搜索框 -->
	  <div class="search">
		  <div class="search-input">
			  <van-field @click="toSearch" left-icon="search" placeholder="请输入区域、商圈、小区或街道名开始找店铺" />
		  </div>
	  </div>
    <!-- 选择区域 -->
	  <van-dropdown-menu class="dropdown-menu" :class="scrollTop?'on':''">
	    <van-dropdown-item :title="districtTitle" ref="item">
        <div class="area-list">
          <div class="area-item" 
          :class="citiesCurrent==item.id?'on':''"
          v-for="item in cities" 
          :key="item.id" 
          @click="changeArea(item.name,item.areaId,item.id)"
          >
          {{item.name}}
          </div>
        </div>
		  </van-dropdown-item>
      <van-dropdown-item v-model="queryForm.rent" @change="changeRent" :title="comRentTitle" :options="optionsRent"/>
      <van-dropdown-item v-model="queryForm.hot" :title="hotTitle" :options="hotList" @change="changeHot" />
      <van-dropdown-item v-model="queryForm.time" :title="newTitle" :options="newList" @change="changeNew" />

	  </van-dropdown-menu>
    <!-- 列表区域 -->
	  <van-list
		v-model="loading"
		:finished="finished"
		finished-text="没有更多了"
		@load="reLoadData"
		:immediate-check="false"
		offset="10"
		>
      <div class="room-list">
        <div class="room-item" @click="to_detail(item1.id,item1)" v-for="item1 in projectList" :key="item1.id">
          <div class="room-pic">
            <img :src="item1.realEstateImage" alt="">
            <div class="sale-img" v-if="item1.realEstateExclusiveAgent==1">
              独家项目
            </div>
            <div class="sale-text" v-if="item1.viewingBonus>=1&&item1.viewingBonus!=null">带看奖励</div>
          </div>
          <div class="room-text">
            <!-- 项目名称 -->
            <div class="room-name">{{item1.realEstateName}}</div>
            <!-- 项目地址 -->
            <div class="room-address">{{item1.realEstateDistrict}} - {{item1.realEstateModule}} - {{item1.realEstateName}}</div>
            <!-- 待租店铺 -->
            <div class="room-sale">
              <span>待租店铺：{{item1.toBeRanted}}</span>
              <!-- <span class="prices" v-if="item1.realEstateMinPrice>0&&item1.realEstateMinPrice!=0">{{item1.realEstateMinPrice}}元起</span> -->
            </div>
            <!-- 项目描述 -->
            <div class="room-format">
              <div class="format-item" v-for="item2 in item1.realEstateTitleList" :key="item2">
                {{item2}}
              </div>
            </div>
          </div>
        </div>
      </div>
	  </van-list>
    <!-- 通用底部 -->
    <div class="foot" :class="projectList.length<=3?'on':''">
      <foot-message></foot-message>
    </div>
  </div>
</template>

<script>
import FootMessage from '@/components/foot-message/index.vue'
import{engineerList,projectAddress}from '@/api/project'
import{mapActions,mapState} from "vuex"
import HeadMessage from '@/components/head-message/index.vue'
export default {
  components:{
		HeadMessage,
    FootMessage
	},
  data() {
    return {
      // 项目查询参数
      queryForm: {
        keywords:"",
        // 省id
        province:"",
        // 市id
        city:"",
        // 区id
        district:"",
        // 省名
        provinceName:"",
        // 市名
        cityName:"",
        // 区名
        districtName:"",
        area: "", // 店铺面积
        district: "", // 地区
        format: "", // 业态
        rent: "", // 价格
        pageNumber: 1,
        pageSize: 5,
        hot:1, // 热度排序 (1正序,0倒叙)
        time:1, //时间排序(1正序,0倒叙)
        weight:0
      },
      AreaCode:"",
      // 地区选择
      // 选中区域
      citiesCurrent:0,
      cities: [
        {name:"不限",id:0,areaId:""},
        {name:"雨花区",id:1,areaId: "1800"},
        {name:"岳麓区",id:2,areaId: "1801"},
        {name:"天心区",id:3,areaId: "1802"},
        {name:"开福区",id:4,areaId: "1803"},
        {name:"芙蓉区",id:5,areaId: "1804"},
        {name:"望城区",id:6,areaId: "1805"},
        {name:"宁乡区",id:7,areaId: "1806"},
        {name:"浏阳区",id:8,areaId: "1807"},
        {name:"长沙县",id:9,areaId: "1808"},
      ],
      // 租金title
      RentTitle:"租金",
      // 租金列表
      optionsRent:[
        { text: '不限', value: "" },
        { text: '10000元以下', value: "10000以下" },
        { text: '10000-15000元', value: "10000-15000" },
        { text: '15000-20000元', value: "15000-20000" },
        { text: '20000-25000元', value: "20000-25000" },
        { text: '25000-30000元', value: "25000-30000" },
      ],
      // 区域title
      districtTitle:"区域",
      // 项目数组排序列表
      hotTitle:"最热项目",
      hotList:[
        {text:'不限',value:3},
        {text:"热度降序",value:0},
        {text:"热度升序",value:1},
      ],
      newTitle:"上架时间",
      newList:[
        {text:"不限",value:3},
        {text:"时间升序",value:0},
        {text:"时间降序",value:1},
      ],
      // 下拉监听
      scrollTop:false,
      loading: false,
      finished: false,
      projectList:[]
    }
  },
  computed:{
    // 用户选中的项目条件
     ...mapState(["vuexEngineerForm"]),
     comRentTitle(){
		  console.log(this.RentTitle)
		  if(this.RentTitle=="租金"){
			   return this.RentTitle
		  }
	  }
  },
  watch:{
    queryForm:{
      handler: function (newVal, oldVal) {
			  console.log(newVal)
        if(newVal.time!=0&&newVal.time!=1){
          this.newTitle="上架时间"
        }
        // 1：选中的区域
        if(newVal.districtName===""){
          this.citiesCurrent=0
          this.districtTitle="区域"
        }else{
           var index1=this.cities.findIndex(v=>v.name===newVal.districtName)
           this.citiesCurrent=index1
           // // 区域为 ”不限“ 时索引为0
        }
		  },
		  deep: true
    },
	  RentTitle:{
		  handler: function (newVal, oldVal) {
			  console.log(newVal)
			   if(newVal=="1000以下"){
				 this.RentTitle="1000元以下"
			   }else if(newVal==""){
				   this.RentTitle="租金"
			   }
		  },
		  deep: true
	  },
	  districtTitle:{
		  handler: function (newVal, oldVal) {
			  console.log(newVal)
			   if(newVal=="区域"){
				  this.districtTitle="区域"
			   }
		  },
		  deep: true
	  },
    // hotTitle:{
		//   handler: function (newVal, oldVal) {
		// 	  console.log(newVal)
		//   },
		//   deep: true
	  // },
  },
  created(){
    const{vuexEngineerForm}=this
    //   加载标题
    document.title = '找项目'+'-躺猪网-好铺好服务找铺上躺猪网！'
    // 项目数据
    this.loadData()
  },
  mounted(){
    const{vuexEngineerForm}=this
    console.log(vuexEngineerForm)
    this.queryForm=vuexEngineerForm
    //  下拉监听
    this.listenerFunction()
    this.queryForm=vuexEngineerForm
    // 租金赋值展示
    this.RentTitle=vuexEngineerForm.rent
    // 区域赋值展示
    if(vuexEngineerForm.districtName==""){
      this.districtTitle="区域"
    }else{
      this.districtTitle=vuexEngineerForm.districtName
    }
    // 热度排序
    if(vuexEngineerForm.hot==0){
      this.hotTitle="热度降序"
    }else if(vuexEngineerForm.hot==1){
      this.hotTitle="热度升序"
    }if(vuexEngineerForm.hot==3){
      this.hotTitle="最热项目"
    }
    // 时间排序
    if(vuexEngineerForm.time==0){
      this.newTitle="时间升序"
    }else if(vuexEngineerForm.time==1){
      this.newTitle="时间降序"
    }else{
      this.newTitle="上架时间"
    }
  },
  beforeDestroy () {
    //  下拉监听
    document.removeEventListener("scroll", this.listenerFunction);
  },
  // 离开页面清除缓存
  destroyed(){
    var vuexEngineerForm= {
      keywords:"",
        // 省id
        province:"",
        // 市id
        city:"",
        // 区id
        district:"",
        // 省名
        provinceName:"",
        // 市名
        cityName:"",
        // 区名
        districtName:"",
        area: "", // 店铺面积
        district: "", // 地区
        format: "", // 业态
        rent: "", // 价格
        pageNumber: 1,
        pageSize: 5,
        hot:3, // 热度排序 (1正序,0倒叙)
        time:3, //时间排序(1正序,0倒叙)
        weight:0,
        wordfromChild:""
    }
    this.SaveUserEngineerSelect(vuexEngineerForm)// 存入Vuex
  },
  methods: {
     ...mapActions(["SaveUserEngineerSelect","savetabCurrent"]),
    // 初始数据
    loadData(){
      const{vuexEngineerForm}=this
      // 如果 关键字存在  才存入Vuex
      if(this.$route.params.Words){
          vuexEngineerForm.keywords=this.$route.params.Words
          this.SaveUserEngineerSelect(vuexEngineerForm)
      }else{
          engineerList({
              // 省id
              province:vuexEngineerForm.province,
              // 市id
              city:vuexEngineerForm.city,
              // 区id
              district:vuexEngineerForm.district,
              // 省名
              provinceName:vuexEngineerForm.provinceName,
              // 市名
              cityName:vuexEngineerForm.cityName,
              // 区名
              districtName:vuexEngineerForm.districtName,
              keywords:vuexEngineerForm.keywords,
              hot:vuexEngineerForm.hot,
              time:vuexEngineerForm.time,
              pageNumber:vuexEngineerForm.pageNumber,
              pageSize:vuexEngineerForm.pageSize,
              weight:vuexEngineerForm.weight
          }).then(res=>{
            console.log(res)
            // 店铺数组
				    this.projectList = res.current === "1" ? res.records : [...this.projectList, ...res.records];
            this.loading = false;
            // 如果
            if (this.projectList >= res.total) {
              this.finished = true;		// 结束加载状态
            }else if(res.records.length>0){
              this.finished = false;
            }else if(res.records.length==0){
              this.finished = true;		
            }
            // 项目描述
            for(let i in res.records){
              // 改造数组
              let formatList=res.records[i].realEstateTitle.split("，");
              // 再将改造后的数组，添加到res.records里面
              res.records[i].realEstateTitleList = formatList;
            }
          })
      }
      // 地理位置
      projectAddress({integer:3}).then(res=>{
          console.log(res)
          this.queryForm.provinceName=res[17].areaName
          this.queryForm.province=res[17].areaId
          this.SaveUserEngineerSelect(this.queryForm)
          projectAddress({parentId:res[17].areaId}).then(res=>{
            console.log(res)
            this.queryForm.cityName=res[0].areaName
            this.queryForm.city=res[0].areaId
            this.SaveUserEngineerSelect(this.queryForm)
            projectAddress({parentId:res[0].areaId}).then(res=>{
              console.log(res)
              // this.SaveUserEngineerSelect(this.queryForm)
            })
          })
      })
    },
    // 返回上一级
    onClickLeft(){
      this.$router.go(-1);
    },
    // 去搜索
    toSearch(){
      this.$router.push({path:'/search'})
    },
    // 下拉监听开始
    listenerFunction(e) {
      document.addEventListener('scroll', this.handleScroll, true);
    },
    handleScroll () {
      // console.log(window.pageYOffset)
      if(window.pageYOffset>200){
        this.scrollTop=true
      }else{
        this.scrollTop=false
      }
    },
	  // 下拉监听结束
    //  关闭地区选择框
    cancelCode(){
      this.$refs.item.toggle();
    },
    // 页码数++，重新加载数据
    reLoadData(){
      this.loading = true;
      const{vuexEngineerForm}=this
      vuexEngineerForm.pageNumber+=1
      this.loadData()
    },
    // 选择租金
    changeRent(value){
      console.log(value)
      if(value==""){
        this.RentTitle="租金"
        this.queryForm.rent=""
      }
      else if(value=="1000以下"){
        this.RentTitle="1000元以下"
      }
      else{
        this.RentTitle=value+'元'
        this.queryForm.rent=value
      }
      // 页码回到第一页
      this.queryForm.pageNumber=1
      // 将选中条件存入Vuex
      this.SaveUserEngineerSelect(this.queryForm)
      // 请求数据
      this.loadData()
      
    },
    // 确认地区选择
    changeArea(name,areaId,id){
      console.log(name,areaId,id)
      if(name=="不限"){
        this.queryForm.districtName=""
        this.queryForm.district=""
      }else{
        this.queryForm.districtName=name
        this.queryForm.district=areaId
      }
      this.queryForm.pageNumber=1
      this.districtTitle=name
      this.citiesCurrent=id
      this.SaveUserEngineerSelect(this.queryForm)// 存入Vuex
      this.loadData()
      // 关闭弹窗
      this.$refs.item.toggle();
    },
    // 去项目详情
    to_detail(id,item){
      if(item.toBeRanted==0){
        this.$toast("敬请期待");
      }else{
        this.$router.push({path:"/projectDetail",query:{EngineerId:id}})
      }
    },
    // 更改热度排序
    changeHot(value){
      console.log(value)
      if(value==3){
        this.hotTitle="最热项目"
        this.queryForm.hot=3
        this.queryForm.weight=1
      }
      if(value==1){
        this.hotTitle="热度升序"
        this.queryForm.hot=1
        this.queryForm.weight=1
      }
      if(value==0){
        this.hotTitle="热度降序"
        this.queryForm.hot=0
        this.queryForm.weight=1
      }
      // 页码回到第一页
      this.queryForm.pageNumber=1
      // 将选中条件存入Vuex
      this.SaveUserEngineerSelect(this.queryForm)
      // 请求数据
      this.loadData()
    },
    // 更改上架时间排序
    changeNew(value){
      console.log(value)
      if(value==3){
        this.newTitle="上架时间"
        this.queryForm.time=3
        this.queryForm.weight=0
      }
      if(value==1){
        this.newTitle="时间降序"
        this.queryForm.time=1
        this.queryForm.weight=0
      }
      if(value==0){
        this.newTitle="时间升序"
        this.queryForm.time=0
        this.queryForm.weight=1
      }
      // 页码回到第一页
      this.queryForm.pageNumber=1
      // 将选中条件存入Vuex
      this.SaveUserEngineerSelect(this.queryForm)
      // 请求数据
      this.loadData()
    }
  }
};
</script>

<style lang="less" scoped>
.components-foot{
  position: relative;
  bottom: 0;
}
// 输入框
.search{
	padding: 0.2rem 0.35rem;
	background-color: #F4F3F8;
}
.search-input{
	.van-cell.van-field{
		background-color: #E8E8EA;
		padding: 0;
		align-items: center;
		padding-left: 0.2rem;
	}
	.van-field__control{
		height: 0.6rem;
	}
}
// 条件区域
.dropdown-menu.on{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
  z-index: 999;
}
/deep/.van-dropdown-menu__bar{
  padding: 0 0.2rem;
}
.dropdown-content{
	padding: 0 0.2rem;
}
.dropdown-title{
	font-size: 0.18rem;
	font-weight: 600;
	margin-top: 0.1rem;
}
.dropdown-list{
	display: flex;
	flex-wrap: wrap;
}
.list-item{
	font-size: 0.14rem;
	border: 1px solid #ddd;
	width: 25%;
	text-align: center;
	margin: 0.05rem;
}
.area-list{
  display: flex;
  flex-wrap: wrap;
  padding: 0.2rem 0;
  .area-item{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.28rem;
    margin-top: 0.3rem;
  }
  .area-item.on{
    color: #ee0a24;
  }
}

// 项目数组
.room-list{
	padding: 0 0.34rem;
  margin: 0.45rem 0;
	height: 100%;
}
.room-item{
	display: flex;
  margin-top: 0.25rem;
  padding-bottom: 0.25rem;
	border-bottom: 1px solid #eee;
	.room-pic{
    width: 2rem;
    height: 1.6rem;
    margin-right: 0.25rem;
    position: relative;
		img{
			width: 100%;
			height: 100%;
		}
    .sale-img{
      position: absolute;
      width: 0.9rem;
      height: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0;
      bottom: 0;
      font-size: 0.18rem;
      color: #fff;
      background-color: #EA4800;
      opacity: 0.9;
    }
    .sale-text{
      position: absolute;
      width: 0.9rem;
      height: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 0;
      bottom: 0;
      font-size: 0.18rem;
      color: #fff;
      background-color: #ea0000;
      opacity: 0.9;
    }
    
	}
	.room-text{
		flex: 1;
		font-size: 0.2rem;
    .room-name{
      font-weight: 600;
      font-size: 0.32rem;
    }
    .room-address{
      font-size: 0.22rem;
      margin-top: 0.1rem;
      color: #999;
    }
    .room-sale{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.05rem 0;
      .prices{
        font-weight: 600;
        color: #EA4800;
        font-size: 0.28rem;
      }
    }
	}
}
.room-format{
  display: flex;
  align-items: center;
  .format-item{
    padding: 2px;
    font-size: 0.12rem;
    margin-right: 0.15rem;
    color: #FFA740;
    background: #FFF5EA;
    font-size: 0.18rem;
    white-space: nowrap;
  }
}
// 通用底部
.foot.on{
  position: absolute;
  bottom: 0;
}
</style>